<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文章列表</title>
		<link rel="stylesheet" href="/webSite/css/header-public.css" />
		<link rel="stylesheet" href="/webSite/css/article-list-public.css" />
		<link rel="stylesheet" href="/webSite/css/popular-article-public.css" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="/webSite/js/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<!--头部引用-->
		<% include header-public.html %>
		<!--nav-->
		<% include article-nav.html %>
		<!--内容框架-->
		<div id="content" class="cl">
			<!--left-->
			<div class="left-content content-div">
				<h4 class="content-title pl-20">最新发布</h4>
				<!--文章列表-->
				<% include article-list-public.html %>
			</div>
			<!--right-->
			<div class="right-content">
				<!--热门推荐-->
				<div class="content-div popular">
					<h4 class="content-title">热门推荐</h4>
					<ul class="popular-article">
						<% hotArticle.forEach(function(data){ %>
						<li>
							<!--缩略图-->
							<a href="/article_details" class="article-img">
								<img src="<%= data.imgSrc %>">
							</a>
							<!--标题-->
							<h3 class="title">
								<a href="/article_details"><%= data.title %></a>
							</h3>
							<!--date-->
							<div class="date">20156-3-25</div>
						</li>
						<% }) %>
					</ul>
				</div>
				<!--广告-->
				<div class="ad content-div">
					<img src="/webSite/images/article-img.jpg">
				</div>
			</div>
		</div>
		<!--文章加载更多模板-->
		<script id="article-tpl" type="text/html">
			{{each data as article}}
			<li>
				<a href="/article-details" class="article-img">
					<img src="{{article.imgSrc}}">
				</a>
				<div class="article">
					<a class="article-title" href="/article-details?id={{article._id}}">{{article.title}}</a>
					<div class="article-info">
						<span class="time">
							<i class="iconfont">&#xe604;</i>
							{{article.releaseTime}}
						</span>
						<span class="time">
							<i class="iconfont">&#xe605;</i>
							{{article.author}}
						</span>
						<span class="time">
							<i class="iconfont">&#xe603;</i>javascript
						</span>
					</div>
					<p class="article-ts">{{article.briefing}}</p>
				</div>
			</li>
			{{/each}}
		</script>
		<script type="text/javascript" src="/webSite/js/template.js" ></script>
		<script type="text/javascript" src="/webSite/js/jquery-2.1.0.js" ></script>
		<script>
			$(function(){
				var page = 1,
						column = "<%= columnCur %>";
				$(".add-btn").click(function(){
					$.post("/article" , {page : page , id : column} , function(data){
						data.data.length < 10 && $(".add-btn").css("display" , "none");
						if(data.state == "ok"){
							var list = template("article-tpl" , data);
							$(".article-list").append(list);
							page++;
						}else{
							alert(data.message);
						};
					},"JSON")
				});
			})
		</script>
	</body>
</html>
